<template>
	<!-- 修改手机号 -->
	<view>
		<view class="phone">
			<view class="text">手机号</view>
			<view class="phone_num flex align-center">
				<input type="number" placeholder="请输入手机号" v-model="phone" maxlength="11" v-if="!cancellation">
				<input type="number"  v-model="phone" maxlength="11" disabled="true" v-else>
			</view>
			<view class="code ">验证码</view>
			<view class="code_input phone_num flex align-center justify-between">
				<input type="number" placeholder="验证码" v-model="code" maxlength="6">
				<text @click="getcode">{{time==60?'获取验证码':time+'s'}}</text>
			</view>
			<view class="phone_num bg flex-c" v-if="!cancellation" @click="next(1)">下一步</view>
			<view class="phone_num bg flex-c" v-if="cancellation" @click="next(2)">注销手机号</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cancellation:0,
				phone:'',
				code:'',
				T:'',
				time:60
			};
		},
		onLoad(e) {
			if(e.zxsj == 1){
				this.cancellation = e.zxsj
				this.phone = e.phone
				uni.setNavigationBarTitle({
					title:'注销账号'
				})
			}
		},
		onUnload() {
			clearInterval(this.T)
		},
		methods:{
			getcode(){
				if(!/^1[3456789]\d{9}$/.test(this.phone)){
					console.log(1);
					uni.showToast({icon:'none',title:'手机号有误'})
					return
				}
				if(this.time == 60){
					this.$api.getcode({},this.phone,1).then(res=>{
						console.log(res);
					})
					this.T = setInterval(()=>{
						this.time--
						if(this.time == 0){
							clearInterval(this.T)
							this.time = 60
						}
					},1000)
				}
			},
			next(i){
				if(i==1){
					this.$api.change_phone({
						phone:this.phone,
						code:this.code,
					},1).then(res=>{
						console.log(res);
						if(res.code == 200001){
							uni.showToast({icon:'none',title:'手机号修改成功'})
							setTimeout(()=>{
								uni.navigateBack()
							},800)
						}
					})
				}else{
					let that = this
					uni.showModal({
						title:'提示',
						content:'您确定注销账号吗',
						success(res) {
							if(res.confirm){
								that.$api.logoff({
									code:that.code
								}).then(res=>{
									if(res.code == 200001){
										uni.clearStorageSync();
										uni.switchTab({
											url:'/pages/tabbar/index'
										})
										
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.phone{
	width: 100%;
	height: 100vh;
	background-color: #fff;
	.text{
		padding-top: 48rpx;
		margin-left: 74rpx;
		font-size: 30rpx;
		color: #CCCCCC;
	}
	.phone_num{
		width: 670rpx;
		height: 98rpx;
		border-radius: 49px;
		padding-left: 32rpx;
		border: 1px solid #CCCCCC;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
	}
	.code{
		color: #666;
		margin-left: 74rpx;
		
	}
	.code_input{
		padding-right: 56rpx;
		text{
			font-size: 30rpx;
			color: #1CD699;
		}
	}
	.bg{
		background: #1CD699;
		border: none;
		font-size: 30rpx;
		color: #fff;
		margin-top: 260rpx;
	}
}
</style>
